<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row style="margin-top: 5px">
                        <Button type="primary" @click="addAuth" style="font-size: 14px;">添加权限</Button>
                    </Row>
                    <Row class="margin-top-20 table_pattern">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="manage_create" title="添加权限" width="40%" class="public_modal_header edit_modal">
            <Form :model="formValidate" ref="formValidate" :label-width="80" style="width: 85%;margin: 0 auto;padding: 25px 0 10px;">
                <FormItem label="权限名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入权限名称"></Input>
                </FormItem>
                <FormItem label="权限描述" prop="description">
                    <Input v-model="formValidate.description" type="textarea" :rows="4" placeholder="请输入权限描述"></Input>
                </FormItem>
                <FormItem label="优先级" prop="sort">
                    <Input v-model="formValidate.sort" placeholder="请输入优先级"></Input>
                </FormItem>
            </Form>
            <div class="btns">
                <Button @click="manage_create = false">取消</Button>
                <Button :loading="saving" type="primary" @click="handleSubmit('formValidate')" style="margin-left:20px">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { authList, createAuth, deleteAuth } from '@/api/main'
    export default {
        data() {
            return {
                pagenation: {},
                columns: [
                    {
                        key: 'name',
                        title: '权限名称',
                        render: (h, params) => {
                            return h('strong', params.row.name)
                        },
                    },
                    {
                        key: 'desc',
                        title: '权限描述',
                        render: (h, params) => {
                            return h('strong', params.row.description)
                        },
                    },
                    {
                        key: 'sort',
                        title: '优先级',
                        render: (h, params) => {
                            return h('strong', params.row.sort)
                        },
                    },
                    {
                        key: 'created_at',
                        title: '创建时间',
                        render: (h, params) => {
                            return h('strong', params.row.created_at)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            title: '您确定要删除该权限吗?',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                deleteAuth(params.row).then(res => {
                                                    if (res.code === 0) {
                                                        let _this = this
                                                        _this.$Message.success('删除成功')
                                                        _this.init()
                                                    } else {
                                                        this.$Message.error(res.text)
                                                    }
                                                })
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                style: {
                                                    margin: '0 5px 0 0',
                                                    border:0,
                                                    background:'transparent',
                                                    fontSize:'14px',
                                                    color:'#377EEF'
                                                },
                                                props: {
                                                    size: 'small'
                                                },
                                            },
                                            '删除',
                                        ),
                                    ],
                                ),
                            ])
                        },
                    },
                ],
                list: [],
                loading: true,
                saving: false,
                manage_create: false,
                item_id: 0,
                formValidate: {
                    name: '',
                    description:'',
                    sort: 1,
                    page: 0,
                },
            }
        },
        components: {
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.formValidate.page = page-1
                this.init(page-1)
            },
            addAuth: function() {
                this.manage_create = true
                this.handleReset('formValidate')
            },
            handleReset(name) {
                this.$refs[name].resetFields()
            },
            showManageForm(obj) {
                this.formValidate = obj
            },
            search: function(){
                this.formValidate.page = 0
                this.init()
            },
            handleSubmit() {
                let _this = this
                if (_this.formValidate.name == '') {
                    this.$Message.error("请填写权限名称");return false;
                }
                if (_this.formValidate.description == '') {
                    this.$Message.error("请填写权限描述");return false;
                }
                createAuth(this.formValidate).then(res => {
                    if (res.code == 0) {
                    //console.log(res.data);return false;
                        _this.$Message.success('添加成功')
                        _this.saving = false
                        _this.manage_create = false
                        _this.init()
                    } else {
                        _this.$Message.error(res.text)
                    }
                    console.log(res)
                })
            },
            init () {
                let obj = {}
                obj.page = this.formValidate.page
                let _this = this
                authList(obj).then(res => {
                    if (res.code == 0) {
                        _this.list = res.data
                        _this.loading = false
                        _this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        _this.pagenation.totalPage = parseInt(res.totalPage)
                        _this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init(0)
        },
    }
</script>
